<template>
	<div class="secondskill">
		<div v-for="(iteme,index) in secondskilldata" :key="index" class="big_box">
			<div v-if="iteme.type === 1" class="top-other">
				<div class="top-other_item">
					<div class="title_1">
						秒杀/时段促销
					</div>
					<div class="title_2">
						Reduction-Big Sale
					</div>
					<div class="title_3">
						<img src="../../assets/img/active_ico.png">
					</div>
					<div class="title_4">
						<timeDown :start="iteme.pStartDate" :end="iteme.pEndDate" />
					</div>
					<div class="title_5">
						<span @click="LockMore(iteme)">查看更多▶</span>
					</div>
				</div>
				<div v-for="(item, str) in iteme.SmallList.slice(0 , 3)" :key="str" class="top-other_item"
					@click="goDetail(item, iteme.type)">
					<!-- <div class="tag">秒杀</div> -->
					<div class="goods-img">
						<img :src="item.defaultAlbum" alt="">
					</div>
					<div class="goods-info">
						<div class="name">
							{{ item.cProductShowName }}{{ item.cModelDescription }}
						</div>
						<div class="price">
							￥{{ item.fSalePrice }}
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import timeDown from "./timeDown.vue" // 倒计时
	export default {
		name: "",
		components: {
			timeDown, // 倒计时
		},
		props: {
			secondskilldata: {
				type: Array,
				default: function() {
					return [];
				},
			},
		},
		data() {
			return {};
		},
		computed: {},
		mounted() {},
		methods: {
			//跳转商品详情
			goDetail(item, type) {
				console.log('item', item, type)
				this.$router.push({
					path: "/fruit/detail",
					query: {
						id: item.pid,
						iShopId: item.iShopId, // 店铺id
						type: type,
					},
				});
			},
			// 查看更多
			LockMore(LockMore) {
				console.log('查看更多', LockMore)
				this.$emit('TabStatus', LockMore)
			}
		},
	};
</script>

<style scoped lang="scss">
	.secondskill {
		.big_box {
			margin-bottom: 2.19rem;

			.top-other {
				display: flex;

				.top-other_item {
					display: flex;
					height: 29.5rem;
					width: 23%;
					flex-direction: column;
					justify-items: center;
					justify-content: center;
					background: #fff;
					align-items: center;
					margin-left: 2.5rem;
					cursor: pointer;

					.tag {
						display: flex;
					}

					.title_1 {
						color: #fff;
						font-size: 1.4rem;
						font-weight: 400;
						display: flex;
						height: 2rem;
						align-items: center;
					}

					.title_2 {
						color: #fff;
						font-size: 1.4rem;
						font-weight: 400;
						display: flex;
						height: 2rem;
						align-items: center;
					}

					.title_3 {
						display: flex;
						height: 10rem;
						align-items: center;

						img {
							height: 4rem;
							width: 3rem;
						}
					}

					.title_4 {
						display: flex;
						height: 3rem;
						align-items: center;
					}

					.title_5 {
						display: flex;
						height: 5rem;
						align-items: center;
						color: #fff;
						font-size: .8rem;

						span {
							background: #333333;
							padding: .5rem 1rem;
							cursor: pointer;
						}
					}

					.goods-img {
						width: 100%;
						height: 18rem;
						display: flex;
						align-items: center;
						justify-content: center;
						background: #fff;

						img {
							width: 15rem;
							height: 15rem;
							object-fit: contain;
						}
					}

					.goods-info {
						display: flex;
						flex-direction: column;
						text-align: center;
						padding: 0 1rem;

						.name {
							font-size: 1.13rem;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: rgba(4, 0, 0, 1);
							overflow: hidden;
							text-overflow: ellipsis;
							white-space: nowrap;
							width: 18rem;
						}

						.price {
							font-size: 1.5rem;
							font-family: Microsoft YaHei;
							font-weight: 400;
							color: rgba(243, 64, 111, 1);
							margin-top: 0.94rem;
						}

						.promotion {
							font-size: .8rem;
							display: flex;
							width: 2rem;
							padding: .2rem 1rem;
							color: rgba(243, 64, 111, 1);
							align-items: center;
							border-radius: 1rem;
							margin-top: 1rem;
							border: 1px solid rgba(243, 64, 111, 1);
						}
					}
				}

				.top-other_item:first-child {
					margin-left: 0;
					background: #17c4a6;
					cursor: auto;
				}
			}
		}
	}
</style>
